import React, { useState, useEffect } from 'react'
import '../static/less/search.less'
import { search, hotSearch } from '../api/index'
import { Link } from 'react-router-dom'
export default function Search() {
    let [text, setText] = useState("");
    let [keyword, setKeyWord] = useState("");
    let [hotList, setHotList] = useState([]);
    let [searchList, setSearchList] = useState([]);

    hotSearch().then(
        content => {
            // console.log(content);
            let { code, data } = content;
            if (code == 200) {
                setHotList(data.list);
            }
        }
    )

    const SearchFn = async () => {
        if (keyword == "") {
            // console.log('暂无搜索记录');
            return false;
        }
        else {
            await search({
                keyword: keyword,
                p: 1
            }).then(
                content => {
                    // console.log(content);
                    let { code, data } = content;
                    if (code == 200) {
                        setSearchList(data.list)
                    }
                }
            )
        }
    }

    // 初始化 
    useEffect(() => {
        SearchFn();
    }, [keyword])

    return (
        <div className='search'>
            <div className='top'>
                <div className='back' onClick={
                    () => {
                        window.history.back();
                    }
                }></div>
                <h2 className='top-title'>搜索</h2>
            </div>
            <div className='middle'>
                <div className='search_inp'>
                    <i className='icon'></i>
                    <input className='inp' type="text" placeholder='请输入关键字搜索'
                        onChange={(event) => {
                            let v = event.currentTarget.value;
                            setText(v)
                        }}
                    />
                </div>
                <button className='btn'
                    onClick={() => {
                        setKeyWord(text);
                        // console.log(text);
                    }}
                >搜索</button>
            </div>
            <div className='bottom' style={{ display: searchList.length == 0 ? 'block' : 'none' }}>
                <div className='hot_title'>
                    <h3>搜索热榜</h3>
                </div>
                {
                    hotList.map((item, i) => {
                        return (
                            <Link to={`/detail?id=${item.id}`} key={i} className='hott'>
                                <div className="hot">
                                    <div className='hot_left'>
                                        <span className='hot_num'>{i + 1}</span>
                                        <span className='hot_text'>{item.title}</span>
                                    </div>
                                    <div className='hot_right'>
                                        <span className='hot_look'>{item.num_fav}</span>
                                    </div>
                                </div>
                            </Link>

                        )
                    })
                }
            </div>
            <div className="bottom" style={{ display: searchList.length == 0 ? 'none' : 'block' }}>
                <div className='search_title'>
                    <h3>与{keyword}相关的作品</h3>
                </div>
                <div className='search_boxs'>
                    {
                        searchList.map((item, i) => {
                            return (
                                <div className="search_box" key={i}>
                                    <Link to={`/detail?id=${item.id}`}>
                                        <img className='search_img' src={item.pic} alt="" />
                                        <div className='search_text'>
                                            <h3>{item.title}</h3>
                                            <p>已更新{item.lastNumChapter}话</p>
                                        </div>
                                    </Link>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}
